<template>
  <div class="page">
    <div class="top">
           <c-title :hide="false" text="门店列表"></c-title>

      <div class="shuju" v-if="!ympicList">
        <div v-for="(item, index) in ympicList" :key="index" @click="getymId(item.id)">
          <div class="imgclass">
            <img :src="item.thumb" />
          </div>
          <div class="sjtop">
            <div class="nameclass">
              <div class="name">门店名称：{{ item.store_name }}</div>
            </div>
          </div>
          <div class="sjbottom">
            <div class="professionclass">联系电话：{{ item.mobile }}：</div>
          </div>
          <div class="address">
            <div class="addressclass">门店地址：{{ item.address }}</div>
          </div>
        <br/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: 0,
      Proid: 0,
      ympicList: []
    };
  },
  activated() {
    this.Proid = this.$route.query.id;
    this.getList();
  },
  methods: {
    getList() {
      $http.post("plugin.store-cashier.frontend.store.makeup.get-stores-by-project", {
          projectid: this.Proid
        })
        .then(response => {
          this.ympicList = response.data;
          console.log(this.ympicList);
        });
    },
    getymId(id) {
      console.log(id);
      this.$router.push(this.fun.getUrl("o2oStore_v2", { store_id: id }, {}));
    }
  }
};
</script>
<style scoped lang="scss">
.shuju {
  margin: 1% 1%;
  padding: 1rem;
  background-color: #fff;
  .imgclass {
    display: flex;
    img {
      width: 5rem;
      height: 5rem;
      border-radius: 3rem;
      margin-left: 1rem;
    }
  }
  .sjtop {
    display: flex;
    margin-left: 8rem;
    margin-top: -5rem;
    margin-bottom: 1rem;
    .nameclass {
      .name {
        display: flex;
        justify-content: center;
        text-align: center;
      }
    }
  }
  .sjbottom {
    display: flex;
    margin-bottom: 1rem;
    .professionclass {
      justify-content: center;
      margin-left: 8rem;
    }
  }
  .address {
    display: flex;
    margin-left: 8rem;
  }
}
</style>